//
// Page components
// --------------------------------------------------

// TODO: also using this style for a volume claim template.
// consider a slightly more generic name that isn't limited to 'pod'
.pod-template-block {
  + .pod-template-block {
    margin-top: 15px;
  }
  .component-label {
    font-size: @component-label;
    padding: 0 10px 4px 0;
    text-transform: uppercase;
  }
  .pod-template {
    // so that .word-break() on children works
    [flex] {
      min-width: 0;
    }
    .icon-row {
      border-left: 3px solid @gray-lighter;
      padding: 2px 0 0 2px;
    }
    .fa,
    .pficon,
    span[data-icon] {
      color: #888;
    }
    .pod-template-build {
      .word-break();
    }
    .pod-template-key {
      font-weight: 600;
    }
  }
}

.pod-template-container {
  margin: 0 0 20px;
}

code.command {
  // Use inline-block style to prevent trailing whitespace from being
  // highlighted with a background color.  The extra whitespace is difficult to
  // avoid due to use of `ng-repeat` and `truncate-long-text`.
  display: inline-block;
  line-height: 1.3;
  margin-right: 2px;
}

.hash {
  font-family: @font-family-monospace;
  font-size: @font-size-base;
}

.clickable {
  cursor: pointer;
}

.pod-donut {
  &.mini {
    display: inline-block;
    margin: 0 0 0 -8px;
    min-width: 45px;
    min-height: 45px;
    top: 3px;
    vertical-align: middle;
  }
  .c3-defocused {
    // Adjusting the default hover "opacity: .3" to be slightly darker
    // and prevent the "c3-Running" state from looking similar to "c3-Not-Ready" state
    // https://github.com/openshift/origin/issues/9253
    opacity: .5 !important;
  }
  .c3-tooltip-container {
    top: -27px !important;
    left: 50% !important;
    transform: translateX(-50%);
    // prevent text wrap
    white-space: nowrap;
  }
  // Give an empty pod donut chart a light gray outline.
  path.c3-arc-Empty {
    stroke: #d1d1d1;
    // Override the style set in JavaScript since you can't click or hover
    // on the empty chart.
    cursor: inherit !important;
  }
  .c3-tooltip-name--Empty .name {
    // hide tooltip text 'Empty'
    display:none;
  }
}

.donut-mini-text {
  display: inline-block;
  min-width: 50px;
}

.deployment-donut {
  justify-content: center;
  .browse-deployment-donut & {
    align-items: center;
  }
  .scaling-controls {
    justify-content: center;
    font-size: 24px;
    a {
      color: #bbbbbb;
      &:hover, &:active {
        color: #72767b;
        text-decoration: none;
      }
      &.disabled {
        opacity: 0.4;
        cursor: not-allowed;
        &:hover {
          color: #bbbbbb;
        }
      }
    }
  }
  .scaling-details {
    .small;
    .text-muted;
    .text-center;
    align-items: center;
    // Show text closer to the pod donut. (It has no bottom margin, but the donut chart does not
    // fill the entire SVG height.)
    margin-top: -5px;
    margin-bottom: 7px;
    .check-events {
      white-space: nowrap; // so that "Check events" link text doesn't wrap to two lines on deployments page
    }
    .hpa-warning {
      cursor: help;
      margin-left: 1px;
      // middle, baseline, etc. are not quite right. Use a length value to align the icon exactly
      // where we want.
      vertical-align: -1px;
    }
  }
}

.popover {
  font-size: 13px;
  line-height: 1.66667;
  min-width: 300px;
  word-wrap: break-word;
}

//
// Service Binding Component
//

// gnarly override...
.overview .expanded-section .service-binding .row > [class^=col-] {
  margin-bottom: 0;
}

.service-binding {
  margin-bottom: 15px;

  h3 {
    line-height: 1.4;
    margin-top: 0;
    small {
      display: block;
      margin-top: 5px;
      &:first-of-type {
        margin-top: 0;
      }
    }
  }

  .component-label {
    font-size: @component-label;
    font-weight: 500;
    padding: 0 0 4px 0;
    .text-muted();
    text-transform: uppercase;
    .sublabel {
      font-size: (@component-label - 1);
      margin-left: 2px;
      text-transform: none;
    }
  }

  .resource-details & {
    h3 {
      border-bottom: 0;
      margin: 0;
      padding-bottom: 5px;
    }
  }
}

.service-binding-message {
  margin-left: 20px;
}
.service-binding-parameters {
  margin-top: 5px;

  > form {
    margin-top: 5px;
  }
  .hide-show-link {
    font-size: @font-size-base;
    margin-left: 5px;
  }
}

.service-binding-actions {
  font-size: 13px;
  font-weight: 400;
  margin-top: 5px;

  > a {
    border-left: 1px solid @color-pf-black-300;
    padding: 0 10px;

    &:first-of-type {
      border-left: 0;
      padding-left: 0;
      padding-right: 5px;
    }
  }
}

.service-description .truncated-content {
  white-space: pre-wrap;
}
